<template>
  <div>
      <div>{{city}}</div>
      <div>{{destination}}</div>
      <button @click="addAgeAction">点击</button>
      <div>{{age}}</div>


      <!--跳转-->
      <!--<router-link :to="{name:'detail'}">点我跳转到detail</router-link>-->
      <button @click="jump">点我跳转到detail</button>
  </div>
</template>

<script>
//store是别名，指带"src/store"
import {CITY_AGE} from "store/mutation-types"//这边需要单独引入
import {mapState,mapMutations} from "vuex"
export default {
  name: 'home',
  computed:{
      ...mapState(['city','destination','age']),
  },
  methods:{
      ...mapMutations([CITY_AGE]),
      addAgeAction(){
          this[CITY_AGE](10) //this是vue实例
      },
      //跳转传参，无需在router.js配置，只有子路由动态传参时才需要，无需借助encodeURI解决中文路径问题
      jump(){
          let uid="我是从Home出啊过来的";
          this.$router.push({name:'detail',params:{uid:uid}})
      }
  }
}
</script>
